<template>
  <view class="barCon">
    <view class="bar">
      <view class="barLine">
        <view class="item" v-for="(item, index) of 10" :key="index"></view>
      </view>

      <scroll-view
        class="barList"
        scroll-x="true"
        scroll-anchoring
        scroll-with-animation
      >
        <view class="barItem" v-for="(item, index) of barList" :key="index">
          <view>{{ item.value }}</view>
          <text :style="[getItemHeight(item.value)]"></text>
        </view>
      </scroll-view>
    </view>

    <view class="barDate" v-if="params">
      {{ params.start_date }}-{{ params.end_date }}
    </view>
  </view>
</template>

<script>
export default {
  props: {
    params: {
      type: Object,
      default() {
        return null;
      },
    },

    barList: {
      type: Array,
      default() {
        return [];
      },
    },

    max: {
      type: Number,
      default: 0,
    },
  },

  computed: {
    getItemHeight() {
      return (num) => {
        let height = (((num || 0) / this.max) * 100).toFixed(2) + "%";
        return {
          height,
        };
      };
    },
  },

  mounted() {
    // let nums = [],
    //   list = [];
    // for (let i = 0; i < 10; i++) {
    //   nums.push(i);
    // }
    // for (let i = 0; i < 10; i++) {
    //   list.push({
    //     num: i * 4,
    //   });
    // }
    // this.$nextTick(() => {
    //   this.nums = nums;
    //   this.list = list;
    // });
  },
};
</script>

<style lang="less" scoped>
.bar {
  position: relative;
  height: 260rpx;
}

.barLine {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .item {
    border: 0.5px dotted #e0e6f2;
  }
}

.barDate {
  padding: 10rpx 0 40rpx;
  text-align: right;
  color: #2e2d2d;
  font-size: 30rpx;
}

.barItem {
  position: relative;
  display: inline-block;
  margin-right: 10rpx;
  width: 14rpx;
  /* border-radius: 64px; */
  height: 100%;

  text {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 64px;
    background: #fa6400;
  }

  view{
    position: absolute;
    left: 0;
    bottom:100%;
  }
}

.barList {
  width: 100%;
  height: 100%;
  white-space: nowrap;
}
</style>
